<!-- :placeholder="ruleItem.hint"  -->
<template>
  <div class="rule-item-css">
    <div v-text="ruleItem.textBefore"></div>
    <el-tooltip :open-delay="1000" :disabled="!getTextWidthOd" :content="getLabel" placement="top" effect="light">
      <el-select v-model="params[ruleItem.fields]"
               @change="selectchange"
               placeholder=""
               size="mini"
               v-loading="loading"
                element-loading-spinner="el-icon-loading"
               clearable
               filterable
               :remote="true"
               :remote-method="remoteMethod"
               default-first-option
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(o,ii) in selectDataObj[`${ruleItem.fields}ListsOrigin`]"
                 :key="ii"
                 :value="o[ruleItem.selectValue]"
                 :label="o[ruleItem.selectLabel]"></el-option>
    </el-select>
    </el-tooltip>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {

    }
  },
  watch: {
    selectDataObj: {
      handler (val) {
        this.checkCurrCompany()
      },
      deep: true
    }
  },
  computed: {
    getLabel () {
      let currList = this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`]
      let optionsdata = currList && currList.find(e => e[this.ruleItem.selectValue] === this.params[this.ruleItem.fields])
      if (optionsdata) return optionsdata[this.ruleItem.selectLabel]
      else return ''
    }
  },
  methods: {
    checkCurrCompany () {
      if (this.params.preOption) {
        let optionsdata = this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`]
        if (!optionsdata.find(e => e[this.ruleItem.selectValue] === this.params.preOption[this.ruleItem.selectValue])) {
          this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`].push(this.params.preOption)
        }
      }
    },
    selectchange (data) {
      var optionsdata = this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`]
      optionsdata.forEach(element => {
        if (element[this.ruleItem.selectValue] === data) {
          this.params.name = element.name
          this.params.preOption = element
        }
      })
    },
    remoteMethod (val) {
      this.getSelectDataLists(this.ruleItem, val)
    }
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
::v-deep .el-loading-spinner{
  top: 66%;
  left: 20px;
  text-align: left;
}
</style>
